<template>
  <div class="couponYH">
    <div class="discount">
        <div class="discount-title clearfix">
          <span
          @click="handleBack"
          class="mui-icon mui-icon-arrowleft"></span>
          <h2 class="">{{$store.state.couponTitle}}优惠券</h2>
        </div>
    </div>
    <div class="bigImgWrap" ref="bigImgWrap">
      <span class="mui-icon icon iconLeft mui-icon-arrowleft" @click="prevImg"></span>
      <img src="" alt="" ref="bigImg">
      <span class="mui-icon icon iconRight mui-icon-arrowright" @click="nextImg"></span>
    </div>
    <h3>--点餐前出示手机中的优惠券，即可享受优惠--</h3>
    <div class="container">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="(item, index) in list" :key="index">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" @click="bigImg(index)" :src="imgUrl(index)">
                
                <div class="mui-media-body">
                    <h4>{{item.couponProductName}}</h4>
                    <p class='mui-ellipsis red'>{{item.couponProductPrice}}</p>
                    <p class='mui-ellipsis red fz'>{{item.couponProductTime}}</p>
                </div>
            </a>
        </li>
      </ul>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "../publicComponents/mmFooter.vue";
import mui from "../../lib/mui/js/mui.min.js"
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      list: [],
      title: '',
      imgList: [],
      imgIndex: 0,
      isM: true
    }
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    getList() {
      var id = this.$route.params.id
      this.$http.get('api/getcouponproduct?'+id).then((res) => {
        this.list = res.body.result
      })
    },
    imgUrl(i) {
      var href = ''
      this.list.forEach((item ,index) => {
        if(i === index) {
          href = item.couponProductImg.slice(item.couponProductImg.indexOf('"')+1,item.couponProductImg.lastIndexOf(' alt')-1)
         return
        }
      })
      return href
    },
    bigImg(i) {
      this.imgIndex = i
      if(this.isM) {
        var href = this.imgUrl(this.imgIndex)
        var mask = mui.createMask(this.imgHidden);//callback为用户点击蒙版时自动执行的回调；
        this.$refs.bigImgWrap.style.display = 'block'
        mask.show();//显示遮罩
        this.$refs.bigImg.src = href
        this.isM = false
      } else {
        var href = this.imgUrl(this.imgIndex)
        // console.log(href)
        this.$refs.bigImg.src = href
      }
    },
    imgHidden() {
      this.$refs.bigImgWrap.style.display = 'none'
      this.$refs.bigImg.src = ''
      this.isM = true
    },
    nextImg() {
     
      if(this.imgIndex === this.list.length-1) {
        Toast({
          message: '已经是最后一张啦',
          position: 'middle',
          duration: 2000
        });
        return
      }
      this.imgIndex++
      this.bigImg(this.imgIndex)
    },
    prevImg() {
      if(this.imgIndex === 0) {
        Toast({
          message: '已经是第一张啦',
          position: 'middle',
          duration: 2000
        });
        return
      }
      this.imgIndex--
      this.bigImg(this.imgIndex)
    },
    handleBack() {
      this.$router.go(-1)
    }
  },
  components: {
    mmFooter
  }
}
</script>
<style lang="less" scoped>
@import '../../less/var';
.couponYH{
  touch-action: pan-y;
  .discount-title {
    height: 98 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 70 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 70 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
  .bigImgWrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 500/@base;
    background-color: #ff9e20;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    padding: 20/@base;
    img {
      width: 70%;
      margin: 30/@base auto;
    }
    span.icon {
      position: absolute;
      top: 50%;
      font-size: 80/@base;
      transform: translateY(-50%);
    }
    span.iconLeft {
      left: 0;
    }
    span.iconRight {
      right: 0;
    }
  }
  h3 {
    font-size: 20/@base;
    text-align: center;
    font-weight: 400;
  }
  .mui-table-view-cell>a:not(.mui-btn) {
    white-space: unset;
  }
  .mui-table-view .mui-media-object {
    width: 200/@base;
    height: 150/@base;
    max-width: unset;
  }
  .mui-media-body {
    h4 {
      font-size: 30/@base;
      line-height: 1.3;
    }
    p.red {
      color:red;
    }
    p.fz {
      font-size: 24/@base;
    }
  }
}
</style>
